<template>
  <form-item-container
    v-if="permission !== 'H'"
    :id="id"
    :item="item"
    :item-config="itemConfig"
    @select-item="selectItem"
    @delete-item="deleteItem"
    @copy-item="copyItem"
  >
    <a-upload
      v-model:file-list="formModel"
      style="padding-right: 4px;"
      :disabled="permission === 'D' || permission === 'R'"
      :action="FILE_UPLOAD_URL"
      :headers="{
        Authorization: `Bearer ${token}`
      }"
      :multiple="config.multiple"
      :directory="config.directory"
      :draggable="config.draggable"
      :limit="config.limit"
      :auto-upload="config.autoUpload"
      :show-file-list="config.showFileList"
      :show-remove-button="config.showRemoveButton"
      :show-retry-button="config.showRetryButton"
      :show-cancel-button="config.showCancelButton"
      :show-upload-button="config.showUploadButton"
      :show-preview-button="config.showPreviewButton"
      :download="config.download"
      :show-link="config.showLink"
      :image-loading="config.imageLoading"
      :list-type="config.listType"
      :image-preview="config.imagePreview"
      :on-before-upload="onBeforeUpload"
      @exceed-limit="onExceedLimit"
      @change="onChange"
    />
  </form-item-container>
</template>

<script lang="ts" setup>
import { inject, defineModel, defineProps, defineEmits, computed } from 'vue';
import { getToken } from '@/utils/auth';
import { FileItem } from '@arco-design/web-vue';
import { FormPermission } from '@/components/form-design/item-select/config/type';
import { FILE_UPLOAD_URL } from '@/api/system/file';
import FormItemContainer from '@/components/form-design/form-container/container-item/form-item-container.vue';

const formModel = defineModel<FileItem[]>({ default: [] });

const props = defineProps({
  id: {
    type: String,
    default: () => ''
  },
  item: {
    type: Object,
    default: () => {
    }
  },
  itemConfig: {
    type: Object,
    default: () => {
    }
  },
  config: {
    type: Object,
    default: () => {
    }
  }
});

const formInstance = inject('formInstance');

const formPermission = inject<any>('formPermission');

const permission = computed<FormPermission>(() => {
  const result = formPermission[props.id];
  if (result) {
    return result;
  }
  return 'E';
});

const emits = defineEmits(['selectItem', 'deleteItem', 'copyItem']);

const token = getToken();

const selectItem = (value: any) => {
  emits('selectItem', props.item);
};

const deleteItem = (value: any) => {
  emits('deleteItem', props.item);
};

const copyItem = (value: any) => {
  emits('copyItem', props.item);
};

const onBeforeUpload = (file: File) => {
  console.log('onBeforeUpload', file);
  return true;
};

const onExceedLimit = () => {

};

const onChange = (fileList: FileItem[], fileItem: FileItem) => {
  if (fileItem.status === 'done') {
    if (fileItem.response.code === 20000) {
      fileItem.url = fileItem.response.data.previewUrl;
      fileItem.uid = fileItem.response.data.fileId;
    } else {
      fileItem.status = 'error';
    }
  }
  if (props.config.onChangeFunction) {
    try {
      const callBack = new Function('value', props.config.onChangeFunction);
      callBack.call(formInstance, fileList);
    } catch (e) {
      console.error(e);
    }
  }
};

</script>

<script lang="ts">
export default {
  name: 'FormItemImageUpload'
};
</script>

<style lang="less" scoped>

</style>